{% extends 'base.html' %}
{% load static %}

{% block sub_title %}
    Тест на аудиофила
{% endblock %}





{% block content %}



    <a href="{% url 'add_audio' %}">Добавить аудио</a>

    {% for song in songs %}
        {#  Вывод всех аудиокомпозиций      #}
        {{ song.pk }}

        <div class="card mb-3">
            <div class="row g-0">
                <div class="col-md-2">
                    <img src="{{ song.photo.url }}" class="img-fluid rounded-start" alt="...">
                </div>
                <div class="col-md-10">
                    <div class="card-body">
                        <h5 class="card-title">НАЗВАНИЕ ТРЕКА</h5>
                        <p class="card-text">
                        <div class="song">

                            <div>
                                <audio src="{{ song.uncompressed_audio.url }}" controls></audio>
                                <button song_id="{{ song.id }} vote="uncompressed_audio">Выбрать</button>
                            </div>

                            <div style="background-color: red">
                                <audio src="{{ song.mp3_320.url }}" controls></audio>
                                <button song_id="{{ song.id }}" vote='mp3_320'>Выбрать</button>
                            </div>

                            <div>
                                <audio src="{{ song.mp3_128.url }}" controls></audio>
                                <button song_id="{{ song.id }}" vote='mp3_128'>Выбрать</button>
                            </div>


                        </div>


                    </div>
                </div>
            </div>
        </div>
    {% endfor %}


    <script src="{% static 'js/audio_test/control_audio.js' %}"></script>
    <script src="{% static 'js/audio_test/shuffle_audio.js' %}"></script>
    <script src="{% static 'js/audio_test/buttons_click_events.js' %}"></script>


{% endblock %}